<template>
  <div>
    <div id="dplayer" :style="dplayerData.style"></div>
  </div>
</template>

<script>
import DPlayer from 'dplayer'
import 'vue-dplayer/dist/vue-dplayer.min.css'
export default {
  name: "DPlayer",
  props: {
    dplayerData: Object,
  },
  data() {
    return {}
  },
  mounted() {
    this.dp = new DPlayer({
      container: document.getElementById('dplayer'),
      theme: '#b7daff', //风格颜色，例如：播放条/音量条的颜色
      loop: true,      //是否自动循环
      lang: 'zh-cn',    //语言：'en','zh-cn','zh-tw'
      hotkey: true,     //是否支持热键，调节音量、播放、暂停等
      preload: 'auto',  //自动预加载
      screenshot: true, //是否显示允许截图按钮
      mutex: true,
      volume: 0.6,      //初始化音量
      video: {
        url: '',        //视频路径
        pic: '',        //视频封面图片
        defaultQuality: 0,
        quality: [      //设置多个质量的视频
          {
            name: 'HD',
            url: '',
            type: 'auto', // 'auto','hls','flv','dash','webtorrent','normal' 或 其他自定义类型
          }
        ],
      },
      highlight: [      //进度条时间点高亮显示
        {
          text: '1M',
          time: 60,
        },{
          text: '2M',
          time: 120,
        },{
          text: '3M',
          time: 180,
        },{
          text: '4M',
          time: 240,
        },{
          text: '5M',
          time: 300,
        },
      ],
      contextmenu: [    //右键菜单
        {
          text: '右键菜单',
          link: 'http://www.baidu.com'
        }
      ]


    })
  },
  methods: {
    //切换视频源事件
    switchVideo(item) {
      this.dp.switchVideo({
        url: item.video,
        pic: item.imgUrl
      })
    },
    //暂停事件
    pause() {
      this.dp.pause();
    }
  }

}
</script>

<style scoped>

</style>
